
<template>
	<div>
	  <MainContent>
		 <div class="content_title">
		 	<span style="color: #222222;font-size: 24px;font-weight: 400;">{{title}}</span>
		 	
		 </div>
		 <div class="table_content">
		 	<el-row>
		 		<div style="display: flex;justify-content: space-between;align-items: center;">
		 			<span>我的店铺列表</span>
		 			<el-row>
						<button class="el-button mini addBuss" @click="getInputUser"> 导入用户组</button>
						<button class="el-button mini addBuss" @click="addUserGroup"> 添加用户组</button>
		 			</el-row>

		 		</div>

			   <el-table
		        ref="multipleTable"
		        :data="groupListData"
		        style='width: 99%;margin-top:70px;'
		        tooltip-effect="dark">
						
		        <el-table-column
		          align="center"
		          type='index'
							style='width:150px!important'
		          label="#">
		        </el-table-column>
		        <el-table-column
		          align="center"
		          prop="Name"
		          label="用户组名称">
		        </el-table-column>
		       	 <el-table-column
		          align="center"
		          prop="Number"
		          label="人数">
		        </el-table-column>
		        <el-table-column
		          align="center"
		          label="操作">
		          <template slot-scope="scope">
		          	    <el-button
		          	    	  v-if="scope.row.Status == '1' "
				              size="mini"
				              type='primary'
				              @click="lookUserGroup(scope.$index, scope.row)">查看</el-button>
		            	<el-button
		            		  v-else
				              size="mini"
				              type='primary'
				              @click="modfilyGroup(scope.$index, scope.row)">修改</el-button>
		            	<el-button
				              size="mini"
				              type='danger'
				              @click="deleteGroup(scope.$index, scope.row)">删除</el-button>
				   </template>
		        </el-table-column>
		     </el-table>
		 	</el-row>
		 	
			<el-row style='margin-top: 20px;text-align: center;'>
			 	<el-pagination 
					  @current-change="handleCurrentChange"
					  :current-page="currentPage"
			    	   layout="prev, pager, next" 
			    	   page-size='10'
			    	  :total="allPage" 
			    	>
			    </el-pagination>
			</el-row>
		 </div>
		 <el-dialog title="导入用户组" :visible.sync="inputGroupOpen" width='400px' >
		 	<el-row style='padding:0 50px;'>
		 		<el-form id='inputUserGroup'>
			 		<el-row>输入用户组名称</el-row>
			 		<el-row style='margin-top: 20px;'>
			 			<el-input type='text' name='Title' size='small' placeholder='请输入用户组名称'></el-input>
			 		</el-row>
	
			 		<el-row>
			 			<label for="fileUpload" class="checkFile" style="">选择文件</label>
			 			<input  name="Excel" type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" style="display: none;" id="fileUpload" @change="getFileName"/>
			 		</el-row>
	
			 		<el-row style='margin: 20px 0;'>
			 			<span v-html="fileName" style="font-size: 12px;color: #AAAAAA;"></span>
			 		</el-row>
		 		</el-form>
		 		<el-row style='margin-top: 30px;text-align: center;'>
		 			<el-button type='primary' :disabled='ifSubmit' @click='putInFile'>导入</el-button>
		 		</el-row>
		 	</el-row>
		</el-dialog>
		 <el-dialog title="用户组详情" :visible.sync="lookUserGroupOff" width='400px'>
		 	<el-row style='padding:0 50px;'>
		 		<el-form id='inputUserGroup'>
			 		<el-row>
			 			<el-col :lg='9'>用户组名称：</el-col>
			 			<el-col :lg=12>
			 				<span>{{lookUserGroupName}}</span>
			 			</el-col>
			 		</el-row>
			 		<el-row style='margin-top: 20px;'>
			 			<el-col :lg='9'>用户列表:</el-col>
			 			<el-col :lg='12'>
			 				<div style="margin-bottom: 10px;border-bottom: solid 1px #c0c4cc;padding:0 10px ;" v-for="(item,index) in lookUserList">
			 					<span style="margin-right:20px ;">{{index + 1}}</span>  <span>{{item}}</span>
			 				</div>
			 				
			 			</el-col>
			 		</el-row>
	
		 		</el-form>
		 	</el-row>
		</el-dialog>
		 <el-dialog :title="groupEdit" :visible.sync="addGroupOpen" width='900px' >
		 	<el-form id='addStore' :model="addGroupData" :rules="rules" ref='addGroupData'>
		 	  <el-row :gutter='20'>
		 	  	<el-col :lg='9'>
			 		<el-form-item label='名称' style='width:90%'>
			 			<el-input size='small' type='text' name='Name' v-model='addGroupData.Name' placeholder='请输入用户组名称'></el-input>
			 		</el-form-item>
		 	  	</el-col>
		 	  	<el-col :lg='9'>
			 		<el-form-item label='排除黑名单' style='width:90%'>
			 			<el-select v-model="addGroupData.Black" name='Black' placeholder="请选择">
						    <el-option label="是" value="1"></el-option>
						    <el-option label="否" value="0"></el-option>
						</el-select>
			 		</el-form-item>
		 	  	</el-col>
		 	  </el-row>
		 	  <el-row style='min-height: 100px'>
		 	  	<el-col :lg='24'>
			 		<el-form-item label='用户圈定' style='width:100%'>
						<el-select style='width:100%' name='SelectList' v-model="addGroupData['SelectList']" multiple  placeholder="请选择">
						    <el-option
						      v-for="item in UserList"
						      :key="item.MissionId"
						      :label="item.Name"
						      :value="item.MissionId">
						    </el-option>
						  </el-select>			 		    
			 		</el-form-item>
		 	  	</el-col>
		 	  </el-row>
		 	  
		 	  <el-row style='min-height: 100px'>
		 	  	<el-col :lg='24'>
			 		<el-form-item label='用户排除' style='width:100%'>
						<el-select style='width:100%' name='ExceptList' v-model="addGroupData.ExceptList" multiple  placeholder="请选择">
			 				<el-option
						      v-for="item in UserList"
						      :key="item.MissionId"
						      :label="item.Name"
						      :value="item.MissionId">
						    </el-option>
						  </el-select>
			 		</el-form-item>
		 	  	</el-col>
		 	  </el-row>
		 	  
		 	  <el-row>
		 	  	<el-col :lg='9'>
			 		<el-form-item label='淘宝等级' style='width:90%'>
			 			<el-select v-model="addGroupData.Grad" name='Grad'  placeholder="请选择">
			 				<el-option
						      v-for="item in taoBaoGrad"
						      :key="item.value"
						      :label="item.label"
						      :value="item.value">
						    </el-option>
						  </el-select>
			 		</el-form-item>
		 	  	</el-col>
		 	  </el-row>
		 	</el-form>
		    <div slot="footer" class="dialog-footer" style="text-align: left;">
			    <el-button v-if="userGroupAjaxKind == '0'" :disabled='ifSubmit' type="primary" @click="addGroupGo">添加</el-button>
			    <el-button v-else :disabled='ifSubmit' type="primary" @click="addGroupGo">修改</el-button>
			    
			</div>
		</el-dialog>
		
		
      </MainContent>
   </div>
</template>
<script>
	import MainContent from '../components/main_content'
	import global from './global'
	export default {
    name: "UserGroup",
    inject:['reload'],
    mounted(){
    	this.initData('1');
    	this.getAllHistoryMission();
    },
    data() {
    	return {
    		title: '用户组',
    		groupListData: [],
    		addGroupOpen: false,
    		lookUserGroupOff: false,
    		coinNum: '',
    		fileName: '未选择文件',
    		allPage: '',
    		currentPage: '1',
    		storeName: '',
    		ifSubmit: false,
    		groupEdit: '新建用户组',
    		lookUserGroupName: '',
    		lookUserList: [],//导入用户组类型查看时候
    		addGroupData:{
    			Name: '',
    			Grad: '',
    			Black: '',
    			SelectList: [],
    			ExceptList: [],
    		},
    		rules:{
    			
    		},
    		UserList: [],
    		taoBaoGrad:[
    			{label:'TBV0',value:'0'},
    			{label:'TBV1',value:'1'},
    			{label:'TBV2',value:'2'},
    			{label:'TBV3',value:'3'},
    			{label:'TBV4',value:'4'},
    			{label:'TBV5',value:'5'},
    			{label:'TBV6',value:'6'},
    		],
    		inputGroupOpen: false,
    		userGroupAjaxKind: '0',  //修改还是添加
    		checkGroupId: '',
    	}
    },
    computed:{
    	checkUser:function(){
    		if(this.addGroupData.SelectList.length != 0){
    			return false
    		}else{
    			return true
    		}
    	}
    },
    components:{
    	MainContent
    },
    methods:{
    	initData(pageNum){
    		let _this = this;
    		global.$http({
						method:'get',
						url:global.urlAll+'PcShowGroupList/',
						headers:{
							'Content-Type':'application/x-www-form-urlencoded',
							'cache-control': 'no-cache, no-store',
							'Pragma': 'no-cache'
						},
						params:{
							BusinessId:$.cookie("userId"),
							Page:pageNum || '1',
							Row: '10'
						}
					}).then((res)=>{
						if(res.data.Success == 'true'){
							_this.groupListData = res.data.Data;
							_this.allPage = res.data.DataNum;
						}
					})
    	},
    	getAllHistoryMission(){
    		let _this = this;
    		global.$http({
						method:'get',
						url:global.urlAll+'PcAllHistoryMission/',
						headers:{
							'Content-Type':'application/x-www-form-urlencoded',
							'cache-control': 'no-cache, no-store',
							'Pragma': 'no-cache'
						},
						params:{
							BusinessId:$.cookie("userId"),
						}
					}).then((res)=>{
						if(res.data.Success == 'true'){
							_this.UserList = res.data.Data;
						}
					})
    	},
    	addUserGroup(){
    		this.addGroupOpen = true;
    		this.userGroupAjaxKind = '0';
    		let item;
    		this.groupEdit = '新建用户组';
    		this.addGroupData.Name =  '';
			this.addGroupData.Grad = '';
			this.addGroupData.Black = '';
			this.addGroupData.SelectList = [];
			this.addGroupData.ExceptList = [];
    		
    	},
    	getFileName(){
			this.fileName = '已选择 ' + document.getElementById('fileUpload').files[0].name;
    	},
    	getInputUser(){
    		
    		this.inputGroupOpen = true;
    	},
    	addGroupGo(){
    		let _this = this;
    		this.ifSubmit = true;
    		
    		let sendData = new FormData();
    		sendData.append('Name', this.addGroupData.Name);
    		sendData.append('Grad', this.addGroupData.Grad);
    		sendData.append('Black', this.addGroupData.Black);
    		sendData.append('SelectList', JSON.stringify(this.addGroupData.SelectList));
    		sendData.append('ExceptList', JSON.stringify(this.addGroupData.ExceptList));
    		sendData.append('BusinessId', $.cookie("userId"));
    		
    	    if(this.userGroupAjaxKind == '0'){
    	    	let config = {
				           headers:{
				             	 'Content-Type':'application/x-www-form-urlencoded',
				              }
				         };
				const formRequest = global.$http.create({ 
				      			widthCredentials : true
				      		})
				formRequest.post(global.urlAll+'PcAddGroup/',sendData,config).then((res)=>{
					this.addGroupOpen = false;
					this.ifSubmit = false;
					if(res.data.Success == 'true'){
						_this.$message('添加成功');
						_this.initData();
					}
				})
    	    }else{
    	    	sendData.append('GroupId',this.checkGroupId)
    	    	let config = {
				           headers:{
				             	 'Content-Type':'application/x-www-form-urlencoded',
				              }
				         };
				const formRequest = global.$http.create({ 
				      			widthCredentials : true
				      		})
				formRequest.post(global.urlAll+'PcUpdateGroup/',sendData,config).then((res)=>{
					this.addGroupOpen = false;
					this.ifSubmit = false;
					if(res.data.Success == 'true'){
						_this.$message('添加成功');
						_this.initData();
					}
				})
    	    }
			
    	},
    	modfilyGroup(index,row){
    		this.addGroupOpen = true;
    		this.userGroupAjaxKind = '1';
    		let _this = this;
    		let item;
    		for (item in this.addGroupData) {
    			this.addGroupData[item] = '';
    		}
    		this.groupEdit = '修改用户组'
    		this.checkGroupId = row.GroupId;
    		global.$http({
						method:'get',
						url:global.urlAll+'PcGroupDetail/',
						headers:{
							'Content-Type':'application/x-www-form-urlencoded',
							'cache-control': 'no-cache, no-store',
							'Pragma': 'no-cache'
						},
						params:{
							GroupId:row.GroupId,
							Status: row.Status,
							
						}
					}).then((res)=>{
						
						if(res.data.Success == 'true'){
							_this.addGroupData = res.data.Data;
							switch (res.data.Data.Level){
								case 0: _this.addGroupData.Grad = 'TBV0'
									break;
							    case 1: _this.addGroupData.Grad = 'TBV1'
									break;
								case 2: _this.addGroupData.Grad = 'TBV2'
									break;
								case 3: _this.addGroupData.Grad = 'TBV3'
									break;
								case 4: _this.addGroupData.Grad = 'TBV4'
									break;
								case 5: _this.addGroupData.Grad = 'TBV5'
									break;
							    case 6: _this.addGroupData.Grad = 'TBV6'
									break;
								default:
									break;
							}
							console.log(_this.addGroupData)
						}
					})
    	},
    	//查看用户组详情（导入的用户组）
    	lookUserGroup(index,row){
    		this.lookUserGroupOff = true;
    		let _this = this;
			_this.lookUserList = [];
			_this.lookUserGroupName = '';
    		global.$http({
						method:'get',
						url:global.urlAll+'PcGroupDetail/',
						headers:{
							'Content-Type':'application/x-www-form-urlencoded',
							'cache-control': 'no-cache, no-store',
							'Pragma': 'no-cache'
						},
						params:{
							GroupId:row.GroupId,
							Status: row.Status,
						}
					}).then((res)=>{
						if(res.data.Success == 'true'){
							_this.lookUserList = res.data.Data.NameList;
							_this.lookUserGroupName = res.data.Data.Name;
						}
					})
    	},
    	//导入用户组
    	putInFile(){
    		
				this.ifSubmit = true;
    	  let FileEl = document.getElementById('inputUserGroup');
    	  let sendData = new FormData(FileEl);
    	  sendData.append('BusinessId',$.cookie('userId'))
	      let config = {
			           headers:{
			             	 'Content-Type':'application/x-www-form-urlencoded',
			              }
			         };
			const formRequest = global.$http.create({ 
			      			widthCredentials : true
			      		})
			formRequest.post(global.urlAll+'ExcelUpload/',sendData,config).then((res)=>{
				this.inputGroupOpen = false;
				this.ifSubmit = false;
				if(res.data.success == 'true'){
					_this.$message('导入成功');
					_this.initData();
				}
			})
    	},
    	deleteGroup(index,row){
    		let _this = this;
    		let Id = row.GroupId;
    		let Status = row.Status;
    		
    		this.$confirm('是否删除吗?', '提示', {
		         confirmButtonText: '确定',
		         cancelButtonText: '取消',
		         type: 'warning'
		       }).then(() => {
	    				global.$http({
							method:'get',
							url:global.urlAll+'PcDeleteGroup/',
							headers:{
								'Content-Type':'application/x-www-form-urlencoded',
								'cache-control': 'no-cache, no-store',
								'Pragma': 'no-cache'
							},
							params:{
								Id: Id,
								Status: Status
							}
						}).then((res)=>{
							if(res.data.Success == 'true'){
								_this.$message('删除成功');
								_this.initData();
								
							}else{
								_this.$message(res.msg)
							}
						})
					})
    	},
    	handleCurrentChange(val){
    		let _this = this;
    		this.currentPage = val;
    		this.initData(val)
    	},
    },
   }
	
	
</script>

<style scoped="scoped">
	.content_title {
	padding-bottom: 30px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    
  }
  .checkFile{
  	width: 60px;
  	margin-top:30px;
  	font-size:10px;
  	height: 28px;
  	color: white;
  	display: inline-block;
  	background: #409EFF;
  	border-radius: 4px;
  	text-align: center;
  }
  .addBuss{
  	width: 150px;
  	height: 40px;
  	background: #1989FA;
  	color: #FFFFFF;
    font-weight: bold;
		margin-right:20px;
  }
  .table_content{
  	padding: 20px;
  	background: #FFFFFF;
  }
  tbody,thead {
	  width: 100% !important;
	}
	colgroup {
	  position: absolute;
	  width: 100% !important;
	  display: flex;
	}
	col {
	  flex: 1;
	  text-align: center;
	}
	.el-input1{
		height:36px;
		background:rgba(255,255,255,1);
		border:1px solid rgba(220,223,230,1);
		border-radius:4px;
		text-align: center;
	}
</style>